<template>
  <!-- 头部 体育大类条件 -->
  <div class="row border-top border-panda-dark-dark relative-position">
    <div class="row" id="select-sport-type" :style="compute_selectSportType_style()">
      <div
        v-for="(items,indexs) in  (sport_type_constant_lt_12 || [])"
        :key="`sport_type_${indexs}`"
        @click="sport_type_click(items,indexs)"
        style="padding-left:4.2%;"
        :class="compute_tab_class(items)"
        class="col-125 text-panda-text-dark text-left cursor-pointer line-height-24px border-right border-panda-dark-dark box-sizing panda-tab-like-tab bg-panda-base-light"
      >
        <!-- <q-icon :name="items.icon"></q-icon> -->
        <span class="panda-icon-mini" :class="items.icon"></span>
        <span
          style="margin-left:4px;"
          class="panda-tab-like-tab-label"
          :class="sport_type_name==items.introduction?'text-panda-text-light ':'text-panda-text-dark'"
        >{{items.introduction}}</span>
      </div>

      <div
        v-if="show_fixed_more_sport_type"
        @mouseleave="change_show_fixed_more_sport_type_false"
        class="absolute z-top full-width border-top border-panda-dark-dark bg-panda-expand-bg-color"
        style=" top:24px; box-shadow: 0 1px 0 0 rgba(0,0,0,0.50);"
      >
        <div class="row bg-panda-expand-bg-color" :style="compute_selectSportType_style()">
          <div
            v-for="(items,indexs) in  (sport_type_constant_gt_12 || [])"
            :key="`sport_type_${indexs}`"
            @click="sport_type_click(items,indexs)"
            :class="compute_tab_class(items)"
            class="col-125 text-panda-text-dark text-left cursor-pointer line-height-30px box-sizing panda-tab-like-tab bg-panda-expand-bg-color"
            style="padding-left:4.2%;"
          >
            <!-- <q-icon :name="items.icon"></q-icon> -->
            <span
              class="d-inner-block"
              style="width:14px;height: 14px;border-radius:50%;border: 1px solid #404758;vertical-align:middle;"
            ></span>
            <span
              style="margin-left:4px;vertical-align:middle;"
              class="panda-tab-like-tab-label"
              :class="sport_type_name==items.introduction?'text-panda-text-light ':'text-panda-text-dark'"
            >{{items.introduction}}</span>
          </div>
        </div>
      </div>
    </div>

    <div
      @mouseenter="change_show_fixed_more_sport_type_true"
      class="text-panda-text-dark text-center cursor-pointer line-height-24px border-panda-dark-dark box-sizing panda-tab-like-tab bg-panda-base-light"
      style="width:110px;"
      :class="show_fixed_more_sport_type?'bg-panda-expand-bg-color':''"
    >
      <span style="margin-left:4px;" class="panda-tab-like-tab-label panda-text-blue">
        <span class="panda-icon-mini"></span>

        {{show_fixed_more_sport_type?'收起':'更多'}}
        <q-icon name="keyboard_arrow_down " :class="show_fixed_more_sport_type?'rotate-180':''"></q-icon>
      </span>
    </div>
  </div>
</template>
<style lang="stylus" scoped></style>
<script>
import { mapGetters, mapActions } from "vuex";
import sportTypemixin from "src/mixins/constant/module/sportType.js";
import routerCacheMixin from "src/mixins/routerCache/routerCache.js";
import { dom } from "quasar";
const { height, width } = dom;
export default {
  mixins: [sportTypemixin, routerCacheMixin],
  data() {
    return {
      sport_type_name: "足球",
      sport_type_constant_lt_12: [],
      sport_type_constant_gt_12: [],
      show_fixed_more_sport_type: false
    };
  },
  props: {},
  computed: {
    ...mapGetters({
      selectedSportTypeInfo: "get_selectedSportTypeInfo",
       sport_type_constant: "get_sportType_array"
      
    })
  },

  created() {
    this.compute_selectSportType_style();
  },

  mounted() {
    this.find_default_item();
  },
  created() {
    this.rebuild_sport_type_constant();
  },
  watch: {
    sport_type_constant() {
      this.rebuild_sport_type_constant();
    },
    window_innerWidth() {
      this.compute_selectSportType_style();
    },
    $route() {}
  },
  methods: {
    rebuild_sport_type_constant() {
      let arr = this.sport_type_constant || [];
      this.sport_type_mapping_constant = this.$lodash.mergeWith(
        this.sport_type_mapping_constant,
        arr,
        (objValue, srcValue) => {
          if (objValue.introduction == srcValue.introduction) {
            return Object.assign(objValue, srcValue);
          }
        }
      );

      this.sport_type_constant_lt_12 = this.sport_type_mapping_constant.slice(
        0,
        8
      );
      this.sport_type_constant_gt_12 = this.sport_type_mapping_constant.slice(
        8
      );
      this.find_default_item();
    },

    compute_selectSportType_style() {
      console.log("compute_selectSportType_style() {");
      console.log(this.window_innerWidth);
      let ww = this.window_innerWidth > 1300 ? this.window_innerWidth : 1300;
      let sstw = ww - 60 - 111;
      let str = `width: ${sstw}px;`;
      return str;
    },
    compute_toggle_button_style() {
      let ws = width(document.getElementById("select-sport-type"));
      return `width: ${this.window_innerWidth - ws - 60} px;`;
    },
    find_default_item() {
      let d_n =
        this.get_router_cache_value_by_path("selectedSportTypeInfo.introduction") ||
        this.sport_type_name;

      let obj = this.$lodash.find(this.sport_type_mapping_constant, function(
        o
      ) {
        return o.introduction == d_n;
      });
      
      this.sport_type_click(obj);


    },

    toggle_show_fixed_more_sport_type() {
      this.show_fixed_more_sport_type = !this.show_fixed_more_sport_type;
    },
    change_show_fixed_more_sport_type_false() {
      this.show_fixed_more_sport_type = false;
    },
    change_show_fixed_more_sport_type_true() {
      this.show_fixed_more_sport_type = true;
    },
    sport_type_click(item, index) {
 
      this.sport_type_name = item.introduction;
      console.log(" this.sport_type_name = item.name;");
      console.log(this.sport_type_name);
      console.log(this.sport_type_mapping_constant );
      console.log(this.sport_type_constant);
      if (item.enname) {

        this.set_router_cache_by_path_and_value("selectedSportTypeInfo", item);
        this.set_match_data({keyWord: item.id})
      } else {
        let obj = this.get_router_cache_value_by_path("selectedSportTypeInfo");
        this.sport_type_click(obj);
      }
    },

    compute_tab_class(items) {
      let str = "";
      str =
        this.sport_type_name == items.introduction
          ? "text-panda-text-light "
          : "text-panda-text-dark";
      if (!items.enname) {
        str = `${str} disabled`;
      }
      return str;
    },
    compute_tab_icon_class(item) {
      let obj = this.$lodash.find(this.sport_type_mapping_constant, o => {
        return o.introduction == item.introduction;
      });
      return obj ? `${obj.icon} panda-icon-mini` : "";
    }
  }
};
</script>
